<template>
	<view class="warehouse">
		<view class="grid-box-area">
			<view class="img-box" v-for="(item, index) in boxs" :key="index">
				<image class="good" v-if="item" :src="imgPrex + item.goodPhoto" @tap="jump(item)" >
				</image>
				<!-- <uni-icons v-if="addIconIndex === index" type="plusempty" size="100" color="rgba(255,255,255,0.6)"></uni-icons> -->
			</view>
		</view>

		<view class="ware-info">
            <view class="left">
            	<image class="left-img" :src="imgPrex + wareHouseDetail.avatar"></image>
				<view>值守： {{ wareHouseDetail.wareHouseChargePeople }}</view>
				<view>联系方式：{{ wareHouseDetail.wareHousePhone }}</view>
            </view>
			
			<view class="right">
				<view>当前仓库总重量： </view>
				<view>{{ wareHouseDetail.totalWeight }} 千克</view>
			</view>

		</view>

        <view class="dots">
        	<view class="dot" v-for="i in dotsLen" :class="[curIndex == (i - 1) ? 'active' : '']" @click="changeCurIndex(i - 1)"></view>
        </view>
		
		<tabarea>
			
			<view class="tap-area-slot">
				<picker   :range="showWarehouseNames" :value="selectedIndex" @change="onPickerChange">
				  <view class="picker">
				    
				    <text class="title">{{
						wareOptions.length ?
						selectedIndex === -1 ? '请选择仓库' 
						: wareOptions[selectedIndex].wareHouseName
						: '暂无仓库'
					}}</text>
				
					<view class="triangle-down"></view>
				  </view>
				</picker>			
			</view>
			
		</tabarea>

		<Custom-tab-bar :current="1" />
	</view>
</template>

<script>
	import CustomTabBar from '../../components/custom-tab-bar.vue';
	import tabarea from '../../components/taparea.vue'
	import * as api from '../../utils/api.js'
	const boxLimitNum = 9;
	
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		components: {
			tabarea,
			CustomTabBar
		},
		data() {
			return {
				imgPrex,
				wareHouseDetail: {},
				wareOptions: [
				        { wareHouseName: '', wareHouseId: '' },				      
				],
				selectedIndex: 0, // 给电子信息产品使用的
				pageNum: 1,
				pageSize: 9,
				total: 0,
				curIndex: 0,
				boxs: [null, null, null, null, null,
				null,null,  null, null,], // 一个仓库所有的物体
			
			}
		},
		computed: {
			
			showWarehouseNames () {
				if (!this.wareOptions || !this.wareOptions.length) return []
				return this.wareOptions.map(item => item.wareHouseName);
			},
			// 计算得出哪个可以显示上传按钮	
			// addIconIndex() {
			// 	return thilogo.pngs.showBoxs.findIndex(v => !v)
			// }

			// showBoxs() {
			// 	const arr = new Array(9).fill(null);
			// 	const startIndex = this.curIndex * 9;
			// 	const endIndex = startIndex + 9;
			// 	const slicedBoxs = this.boxs.slice(startIndex, endIndex);
			// 	for (let i = 0; i < slicedBoxs.length; i++) {
			// 		arr[i] = slicedBoxs[i];
			// 	}
			// 	return arr;
			// },
			dotsLen () {
				const result = this.total % 9;
				const floorNum = Math.floor(this.total / 9);
				
				if (!result && this.total) return floorNum
				return floorNum + 1;
			}
		},
		onLoad() {
			uni.hideTabBar({
				animation: false
			});
			
			this.initData();
			
		},
		onShow(){
			this.initData();
		},
		
		methods: {
			jump (good) {
			  const goodId = good.goodId;
			  uni.navigateTo({
			  	url: `/pages/warehouse/goodDetail?goodId=${goodId}`
			  })
			},
			async initData() {
				await this.getPersonalWarehouses();
				this.selectedIndex = this.wareOptions.length ? 0 : -1;
				await this.changeCurIndex(0);
				const wareHouseId = this.wareOptions[this.selectedIndex].wareHouseId;
				this.getPersonalWareHouseDetail(wareHouseId);
			},
			// 获取私人仓库
			async getPersonalWarehouses () {
				const warehousesRes = await api.personalWareHouse();
				this.wareOptions = warehousesRes.data || [];
			},
			// 获取仓库详情
			async getPersonalWareHouseDetail (wareHouseId) {
				const warehousesRes = await api.wareHouseDetail({wareHouseId});
				this.wareHouseDetail = warehousesRes.data || {};
			},
			
			
			// 获取私人仓库内部所有的商品的信息
			async getPersonalGoodsList() {
				const wareHouseId = this.wareOptions[this.selectedIndex].wareHouseId;
				const pageNum = this.pageNum;
				const pageSize = this.pageSize;
				
				const res = await api.personalGoodsList({wareHouseId, pageNum, pageSize });
				this.boxs = res.rows || [];
				this.total = res.total || 0;
				
				this.boxs = this.fillArray(this.boxs);
				
			},
			async onPickerChange(e) {
				// 当前选中的
                 const prevSelectedWarehouse = this.wareOptions[this.selectedIndex];
			     // 更新选中的索引
			     this.selectedIndex = e.detail.value;
				 const selectedWarehouse = this.wareOptions[this.selectedIndex]
				 if (prevSelectedWarehouse && selectedWarehouse && selectedWarehouse.wareHouseId == prevSelectedWarehouse.wareHouseId) {
					 return
				 }
			     // 根据索引获取实际选中的值
			     // this.formData.eltrInfo = this.eltrInfoOptions[this.selectedIndex].wareHouseId;
			     // console.log('你选择的实际值是：', this.formData.eltrInfo);
				 // 更换仓库 -- 重新获取仓库下面的所有的货品 重置 curIndx 为0 --- update boxs
				 this.changeCurIndex(0);
				 this.getPersonalWareHouseDetail(selectedWarehouse.wareHouseId);
			
			 },
           changeCurIndex(index) {
			   this.curIndex = index
			   this.pageNum = this.curIndex + 1;
			   this.getPersonalGoodsList()
		   },
		   fillArray(arr) {
		       const fillCount = 9 - arr.length;
		       if (fillCount > 0) {
		           const fillArray = Array(fillCount).fill(null);
		           return [...arr, ...fillArray];
		       }
		       return arr;
		   }
		}
	}
</script>

<style lang="scss">
	.warehouse {
		padding: 0 10rpx 40rpx 10rpx;
         .triangle-down {
			  display: inline-block;
			  width: 0;
			  height: 0;
			  margin-left: 10rpx;
			  border-left: 10px solid transparent;
			  border-right: 10px solid transparent;
			  border-top: 20px solid rgb(246,196, 74);
			}
		.grid-box-area {
			margin-top: 30rpx;
			width: 100%;
			padding: 10rpx 10rpx 0 10rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			gap: 20rpx;

			.img-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				background-color: rgba(0, 0, 0, 0.5);

				.good {
					width: 100%;
					height: 100%;
				}

			}
		}

		.ware-info {
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			.left {
				.left-img {
					width: 250rpx;
					height: 250rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				flex: 1;
				font-size: 46rpx;
			}

			color: white;
		}
   
         .dots {
			 display: flex;
			 justify-content: center;
			 gap: 20rpx;
			 padding: 20rpx 0;
			 .dot {
				 width: 20rpx;
				 height: 6rpx;
				 background: rgba(255, 255, 255, 0.5);
			 }
			 .active {
				 background: rgba(253, 128, 8, 0.7);
			 }
		 }
		.tap-area {
			margin: 20rpx 16rpx;
            margin-top: 20rpx;   
			.tap-area-slot {
				.title {
					font-size: 40rpx;
					color: white;
				}
			}
		}
	}
</style>